((w, doc) => {
  function compile(template, data) {
    const oDiv = doc.createElement("div");
    oDiv.innerHTML = template;
    checkFor(oDiv, data);
    oDiv.innerHTML = replaceTpl(oDiv.innerHTML, data);
    return oDiv;
  }
  function replaceTpl(template, obj) {
    return template.replace(/\{\{\s*(\S+)\s*\}\}/g, (node, k) => {
      return obj[k];
    });
  }
  function checkFor(html, data) {
    const allNodes = html.querySelectorAll("*");
    allNodes.forEach((node) => {
      if (node.tagName === "FOR") {
        replaceFor(node, data);
      }
    });
  }

  function replaceFor(html, data) {
    const key = html.dataset.key;
    const tag = html.dataset.tag;
    const className = html.className;
    let li = null;
    const oFrag = doc.createDocumentFragment();
    data[key].forEach((item) => {
      li = doc.createElement(tag);
      li.className = className;
      li.innerHTML = replaceTpl(html.innerHTML, item);
      oFrag.appendChild(li);
    });
    html.parentNode.replaceChild(oFrag, html);
  }

  w.compile = compile;
})(window, document);
